<nz-modal [nzWidth]="680"
          [(nzVisible)]="isVisible"
          nzTitle="{{title}}"
          (nzOnCancel)="handleCancel()"
          (nzOnOk)="handleOk()"
          [nzOkLoading]="isOkLoading"
>

  <form nz-form [formGroup]="formModel">

    <nz-form-item (click)="showParentMenus()">
      <nz-form-label [nzSpan]="5" nzFor="parentName">上级菜单</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input type="text" nz-input placeholder="请选择上级菜单" id="parentName" [ngModelOptions]="{standalone: true}"
                 [(ngModel)]="parentPermission.title"/>
        </nz-input-group>
        <ng-template #suffixIconButton>
          <button nz-button nzType="primary" nzSearch><i nz-icon nzType="search"></i></button>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired nzFor="title">权限名称</nz-form-label>
      <nz-form-control [nzSpan]="16" nzErrorTip="请输入权限菜单名称！">
        <input nz-input name="title" #title type="text" id="title" formControlName="title" placeholder="请输入权限菜单名称" (blur)="updateTitle(title.value)">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired nzFor="titleSimplify">缩写权限名称</nz-form-label>
      <nz-form-control [nzSpan]="16" nzErrorTip="请输入权限菜单名称！">
        <input nz-input name="titleSimplify" type="text" id="titleSimplify" maxlength="6" formControlName="titleSimplify" placeholder="请输入缩写权限名称">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzFor="type">资源类型</nz-form-label>
      <nz-form-control [nzSpan]="6">
        <nz-radio-group id="type" formControlName="type" (ngModelChange)="changeType($event)">
          <label nz-radio [nzValue]="'1'">菜单</label>
          <label nz-radio [nzValue]="'2'" [nzDisabled]="parentPermission.id===0?true:false">权限</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="type == 'menu'">
      <nz-form-label [nzSpan]="5" nzFor="nav">是否导航菜单</nz-form-label>
      <nz-form-control [nzSpan]="10">
        <nz-switch id="nav" formControlName="nav" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="type=='url'">
      <nz-form-label [nzSpan]="5" nzFor="code">权限代码</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input nz-input name="code" type="text" id="code" formControlName="code">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzRequired]="type=='url'?true:false" [nzSpan]="5" nzFor="url">URL</nz-form-label>
      <nz-form-control [nzSpan]="16" nzErrorTip="权限URL为必填！">
        <input nz-input name="url" type="text" id="url" formControlName="url">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="type=='url'">
      <nz-form-label nzRequired [nzSpan]="5" nzFor="method">请求方法</nz-form-label>

      <nz-form-control [nzSpan]="16">
        <nz-radio-group id="method" formControlName="method">
          <label nz-radio [nzValue]="'GET'">GET</label>
          <label nz-radio [nzValue]="'POST'">POST</label>
          <label nz-radio [nzValue]="'PUT'">PUT</label>
          <label nz-radio [nzValue]="'DELETE'">DELETE</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="type=='url'">
      <nz-form-label [nzSpan]="5">是否免授权</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-switch formControlName="noAuth" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="type == 'menu'">
      <nz-form-label [nzSpan]="5" nzFor="param">路由参数</nz-form-label>
      <nz-form-control [nzSpan]="8">
        <input nz-input name="param" type="text" id="param" formControlName="param">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzFor="sort">排序</nz-form-label>
      <nz-form-control [nzSpan]="6">
        <input nz-input name="sort" type="number" id="sort" formControlName="sort">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item *ngIf="type == 'menu'">
      <nz-form-label [nzSpan]="5" nzFor="icon">图标</nz-form-label>
      <nz-form-control [nzSpan]="10">
        <input nz-input name="icon" type="text" id="icon" formControlName="icon">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired nzFor="openSetting">开放设置</nz-form-label>
      <nz-form-control [nzSpan]="10" nzErrorTip="请选择是否上架">
        <nz-radio-group id="openSetting" formControlName="openSetting">
          <label nz-radio [nzValue]="1">开放</label>
          <label nz-radio [nzValue]="0">不开放</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="5" nzRequired nzFor="status">状态</nz-form-label>
      <nz-form-control [nzSpan]="10" nzErrorTip="请选择是否上架">
        <nz-radio-group id="status" formControlName="status">
          <label nz-radio [nzValue]="1">上架</label>
          <label nz-radio [nzValue]="0">下架</label>
        </nz-radio-group>
      </nz-form-control>
    </nz-form-item>

  </form>

  <app-permission-parent #parent [permissionId]="permissionId" [isVisible]="superiorIsVisible" (emit)="setVisible($event)" [platformType]="platformType">></app-permission-parent>

</nz-modal>
